<template>
  <div>
    <el-button type="primary" @click="handleCreate">新增类型</el-button>
    <el-table
      :data="tableData"
      border
      fit
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        'background-color': '#d9ecfe',
        'color': '#333',
        'border-bottom': '1px #dbdbdb solid'
      }"
    >
      <el-table-column property="name" label="类型" />
      <el-table-column property="dictType" label="字典类型" />
      <el-table-column property="value" label="字典值" />
      <el-table-column property="dictColor" label="字典色值" />
      <el-table-column property="dictSequence" label="排序" />
      <el-table-column width="150" label="操作">
        <template slot-scope="scope">
          <el-button plain size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button plain size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--新增-->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogTableVisible" width="600px" append-to-body>
      <el-form ref="dataTypeForm" :rules="rules" :model="temp" :inline="true" label-position="right" label-width="120px" style="width: 100%">
        <el-form-item label="类型" prop="name">
          <el-input v-model="temp.name" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="字典值" prop="value">
          <el-input v-model="temp.value" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="字典色值" prop="dictColor">
          <el-color-picker v-model="temp.dictColor" :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="排序" prop="dictSequence">
          <el-input-number v-model="temp.dictSequence" placeholder="请输入" style="width: 360px" maxlength="32" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSysDict, updateSysDict } from '@/api/admin'
import { deleteSysDict } from '@/api/getTableList'
export default {
  name: 'Index',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  }, data() {
    return {
      temp: {
        id: undefined,
        parentId: '',
        name: '',
        value: '',
        dictType: '',
        dictColor: ''
      },
      dialogTableVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        name: [{ required: true, message: '请输入类型！', trigger: ['blur', 'change'] }],
        value: [{ required: true, message: '请选择字典值！', trigger: 'change' }]
      },
      predefineColors: [
        '#F56C6C',
        '#E6A23C',
        '#409EFF',
        '#67C23A',
        '#606266'
      ]
    }
  },
  methods: {
    // 业务逻辑
    resetTemp() {
      this.temp = {
        id: undefined,
        parentId: '',
        name: '',
        value: '',
        dictType: '',
        dictColor: ''
      }
    },
    // 新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogTableVisible = true
      this.$nextTick(() => {
        this.$refs['dataTypeForm'].clearValidate()
        this.temp.parentId = this.tableData[0].parentId
      })
    },
    createData() {
      this.$refs['dataTypeForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.dictName = this.temp.name
          tempData.dictValue = this.temp.value
          tempData.dictType = this.tableData[0].dictType
          delete tempData.name
          delete tempData.value
          addSysDict(tempData).then(response => {
            this.dialogTableVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 编辑
    handleUpdate(row) {
      this.resetTemp()
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogTableVisible = true
      this.$nextTick(() => {
        this.$refs['dataTypeForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataTypeForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.dictName = this.temp.name
          tempData.dictValue = this.temp.value
          delete tempData.name
          delete tempData.value
          delete tempData.createTime
          updateSysDict(tempData).then(response => {
            this.dialogTableVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteSysDict(row.id).then(response => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          loading.close()
          this.handleReset()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 刷新
    handleReset() {
      this.$emit('getType')
    }
  }
}
</script>

<style scoped lang="scss">
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>

